<template>
  <div class="mypage">
    <!-- 头像栏 -->
    <div class="mypage-top">
      <img src="./../../../assets/HomeImg/9.png" alt="" class="bj-img">
      <div class="top">
        <div class="top-img">
          <img :src="userInfo&&userInfo.u_photo" alt="">
        </div>
        <p class="cen-title">{{userInfo&&userInfo.u_nick}}</p>
        <div class="bot-img">
          <img src="./../../../assets/HomeImg/12.png" alt="">
        </div>
      </div>
    </div>
    <!-- 我的主页图标栏 -->
    <div class="mmodel">
      <ul class="mmodel-ul">
        <li @click="navigate('/userinfo')">
          <img src="./../../../assets/HomeImg/14.png" alt="" ><span>我的主页</span>
        </li>
        <li>
          <img src="./../../../assets/HomeImg/15.png" alt=""><span>消息</span>
        </li>
        <li>
          <img src="./../../../assets/HomeImg/16.png" alt=""><span>收藏</span>
        </li>
        <li>
          <img src="./../../../assets/HomeImg/17.png" alt=""><span>关注</span>
        </li>
      </ul>
    </div>
    <!-- 购物车栏 -->
    <div class="carts">
      <div class="carts-left carts-w" @click="navigate('/cart')">
        <span>购物车</span>
      </div>
      <div class="carts-right carts-w">
        <ul>
          <li>卡卷红包<span>></span></li>
          <li>补贴保障<span>退货补运费></span></li>
          <li>我的钱包<span>白付美在这></span></li>
        </ul>
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="dindan">
      <p>
        <span class="">我的订单</span>
        <span class="dindan-fr">全部></span>
      </p>
      <ul>
        <li><img src="./../../../assets/HomeImg/18.png" alt=""><span>待付款</span></li>
        <li><img src="./../../../assets/HomeImg/19.png" alt=""><span>待发货</span></li>
        <li><img src="./../../../assets/HomeImg/20.png" alt=""><span>客服</span></li>
        <li><img src="./../../../assets/HomeImg/21.png" alt=""><span>评价</span></li>
        <li><img src="./../../../assets/HomeImg/22.png" alt=""><span>退款售后</span></li>
      </ul>
    </div>
    <!-- 我的设置 -->
    <div class="dindan">
      <p>
        <span class="">我的设置</span>
      </p>
      <ul>
        <li><img src="./../../../assets/HomeImg/23.png" alt=""><span>签到</span></li>
        <li><img src="./../../../assets/HomeImg/24.png" alt=""><span>大姨妈</span></li>
        <li><img src="./../../../assets/HomeImg/25.png" alt=""><span>客服</span></li>
        <li><img src="./../../../assets/HomeImg/26.png" alt=""><span>达人中心</span></li>
        <li><img src="./../../../assets/HomeImg/27.png" alt=""><span>运势</span></li>
      </ul>
    </div>
    <!-- 退出登录按钮 -->
    <button @click="out">退出登录</button>
    <!-- 底部 -->
    <Tabber></Tabber>
  </div>
</template>
<script>
  import Tabber from '@/components/Tabber'
  export default {
    data: () => ({
     
    }),
    created() {
     
    },
    computed:{
      userInfo(){
         return JSON.parse(localStorage.getItem('userinfo'))
      }
    },
    components: {
      Tabber
    },
    methods: {
      navigate(route) {
        this.$router.push(route)
      },
     
      out() {
        localStorage.removeItem('token')
        this.$router.push('/User')
      }
    }
  }

</script>
<style lang="less" scoped>
  .mypage {
    height: 100%;
    width: 100%;
    background: #f2f2f2;
    position: absolute;
    color: #444;
    margin-bottom: 50px;
    font-size: 12px;

    // 头像栏
    .mypage-top {
      width: 100%;
      // height: 16rem;
      position: absolute;

      .bj-img {
        width: 100%;
      }

      .top {
        width: 92%;
        height: 8rem;
        background: #fff;
        position: absolute;
        top: 50px;
        left: 4%;
        border-radius: 4px;

        .top-img {
          width: 4rem;
          height: 4rem;
          position: absolute;
          top: -25%;
          left: 50%;
          transform: translateX(-50%);//translateX平移的宽度是元素内容的宽度百分比，不包括border，。。。
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            // border: 3px solid #ff0000;
          }
        }

        .bot-img {
          width: 100%;
          position: relative;
          bottom: -1px;

          img {
            width: 100%;
            border-radius: 0 0 4px 4px;
          }
        }

        .cen-title {
          padding-top: 25px;
          text-align: center;
          font-size: 16px;
          font-family: '楷体';
          font-weight: bold;
        }
      }
    }

    // 我的主页图标栏
    .mmodel {
      margin-top: 200px;
      width: 92%;
      margin-left: 4%;
      height: 80px;
      background: #fff;
      border-radius: 4px;

      .mmodel-ul {
        li {
          width: 50px;
          text-align: center;
          float: left;
          margin: 15px 10px;

          img {
            width: 28px;
            margin: 0 11px;
          }
        }
      }
    }

    // 购物车栏
    .carts {
      width: 92%;
      margin: 10px 4% 10px;
      height: 117px;

      .carts-w {
        width: 48%;
        height: 100%;
        background: #fff;
        float: left;
        box-sizing: border-box;
        border-radius: 4px;
        padding-top: 16px;

        span {
          font-size: 16px;
          margin-left: 16px;
          float: left;
        }
      }

      .carts-left {
        margin-right: 4%;
        background: url('./../../../assets/HomeImg/13.png') no-repeat;
        background-size: 100%;
      }

      .carts-right {
        ul {
          width: 100%;
          height: 100%;

          li {
            box-sizing: border-box;
            padding: 0 4%;
            height: 33%;
            border: 1 solid #ccc;
            width: 100%;

            span {
              float: right;
              color: #ccc;
              font-size: 10px;
            }
          }
        }
      }
    }

    // 我的订单&我的设置
    .dindan {
      width: 92%;
      margin-left: 4%;
      height: 110px;
      background: #fff;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 0 4%;

      p {
        line-height: 40px;
        height: 40px;
        border-bottom: 0.3px solid #c2c2c2;

        .dindan-fr {
          float: right;
          color: #ccc;
        }
      }

      ul {
        height: 60px;

        li {
          float: left;
          width: 20%;
          height: 100%;
          text-align: center;

          img {
            width: 40%;
            margin: 0 30%;
          }
        }
      }
    }

    // 退出登录按钮
    button {
      width: 92%;
      height: 40px;
      background: rgb(255, 87, 119);
      border: none;
      margin: 10px 0 50px 4%;
      color: #fff;
    }
  }

</style>
